﻿@page "/chart/hilo-open-close"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts
@using Newtonsoft.Json

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the AAPL historical data with default HILO Open Close series in the chart. The tooltip and the crosshairs display the data and period information.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render and configure the HILO Open Close type series. The horizontal lines on the left and the right are used to show the open and close values of the stock, and the vertical line represents both high and low values.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information about the HILO Open Close series can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/chart/chart-types/high-low-open-close'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfChart Title="AAPL Historical" Theme="@Theme">
        <ChartArea>
            <ChartAreaBorder Width="0"></ChartAreaBorder>
        </ChartArea>
        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">
            <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
        </ChartPrimaryXAxis>
        <ChartPrimaryYAxis Title="Price" RangePadding="ChartRangePadding.None" Interval="20" LabelFormat="n0">
            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
        </ChartPrimaryYAxis>
        <ChartLegendSettings Visible="false"></ChartLegendSettings>
        <ChartTooltipSettings Enable="true" Shared="true"></ChartTooltipSettings>
        <ChartCrosshairSettings Enable="true" LineType="LineType.Vertical">
        </ChartCrosshairSettings>
        <ChartSeriesCollection>
            <ChartSeries DataSource="@ChartPoints" Name="Apple Inc" XName="Period" High="High" Low="Low" Open="Open" Close="Close"
                         BearFillColor="#2ecd71" BullFillColor="#e74c3d" Type="ChartSeriesType.HiloOpenClose">
            </ChartSeries>
        </ChartSeriesCollection>
    </SfChart>
</div>

@code{

    private Theme Theme { get; set; }
    public HLOCData[] ChartPoints { get; set; } = new HLOCData[] { };

    protected override void OnInitialized()
    {
        ChartPoints = JsonConvert.DeserializeObject<HLOCData[]>(System.IO.File.ReadAllText("./wwwroot/data/chart/financial-data.json"));
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class HLOCData
    {
        public DateTime Period { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
    }
}